// 1. 导入路由包，得到 createBrowserRouter 函数
import { createBrowserRouter } from 'react-router-dom'
import { ErrorBlock } from 'antd-mobile'
// 路由链接
import { Link } from 'react-router-dom'

// 懒加载 Home 组件的函数
const lazyHome = async () => {
  const { default: Home, loader } = await import('../pages/tabs/Home')
  return {
    element: <Home />,
    loader
  }
}

// 2. 调用 createBrowserRouter 函数创建路由对象
// 2.1 传入一个参数，是路由的数组
// 2.2 路由的数组中，包含许多个路由的配置对象 { path:'', element: 组件 }
const router = createBrowserRouter(
  [
    // 路由配置
    {
      path: '/',
      // element: <App />,
      async lazy() {
        // 使用 import() 函数懒加载对应的组件
        const { default: App } = await import('../App.jsx')
        return {
          element: <App />
        }
      },
      children: [
        // 索引路由：包含 index:true 属性的路由，叫做“索引路由”
        // 注意：索引路由，没有 path 属性！！！
        { index: true, lazy: lazyHome },
        // 子路由
        { path: 'home', lazy: lazyHome },
        {
          path: 'order-list',
          async lazy() {
            const { default: OrderList } = await import(
              '../pages/tabs/Order-List'
            )
            return {
              element: <OrderList />
            }
          }
        },
        {
          path: 'me',
          async lazy() {
            const { default: Me } = await import('../pages/tabs/Me')
            return {
              element: <Me />
            }
          }
        }
      ]
    },
    // 登录和注册的路由，必须放到顶级路由的位置
    {
      path: '/login',
      async lazy() {
        const { default: Login } = await import('../pages/auth/login.jsx')
        return {
          element: <Login />
        }
      }
    },
    // 注册的路由
    {
      path: '/reg',
      async lazy() {
        const { default: Reg } = await import('../pages/auth/reg.jsx')
        return {
          element: <Reg />
        }
      }
    },
    // 选择城市的路由
    {
      // 如果是点击左侧，进入城市页面，则 path 应该是 /city/start
      // 如果是点击右侧，进入城市页面，则 path 应该是 /city/end
      path: '/city/:type', // 路径参数，用 :表示，比如 :type
      async lazy() {
        const { default: City, loader } = await import(
          '../pages/city/index.jsx'
        )
        return {
          element: <City />,
          loader
        }
      }
    },
    // 车票列表页面
    {
      path: '/query',
      async lazy() {
        const { default: TrainList, loader } = await import(
          '../pages/train/List.jsx'
        )
        return {
          element: <TrainList />,
          loader
        }
      }
    },
    // 车票详情页面
    {
      path: '/detail/:id',
      async lazy() {
        const { default: TrainDetail, loader } = await import(
          '../pages/train/Detail.jsx'
        )
        return {
          element: <TrainDetail />,
          loader
        }
      }
    },
    // 订单填写页面
    {
      path: '/order',
      async lazy() {
        const { default: Order } = await import('../pages/order/index.jsx')
        return {
          element: <Order />
        }
      }
    },
    // 订单支付页面
    {
      path: '/order-pay',
      async lazy() {
        const { default: OrderPay } = await import('../pages/orderPay')
        return {
          element: <OrderPay />
        }
      }
    },
    // 支付结果页
    {
      path: '/pay/result',
      async lazy() {
        const { default: PayResult, loader } = await import(
          '../pages/payResult'
        )
        return {
          element: <PayResult />,
          loader
        }
      }
    },
    // 客服的路由
    {
      path: '/chat',
      async lazy() {
        const { default: Chat } = await import('../pages/tabs/Chat')
        return {
          element: <Chat />
        }
      }
    },
    // 乘车人列表
    {
      path: '/psg-list',
      async lazy() {
        const { default: PsgList, loader } = await import('../pages/psg')
        return {
          element: <PsgList />,
          loader
        }
      }
    },
    // 乘车人的新增和修改
    {
      path: '/psg-add',
      async lazy() {
        const { default: PsgAdd } = await import('../pages/psg/add.jsx')
        return {
          element: <PsgAdd />
        }
      }
    },
    // 404 错误路由
    {
      path: '*',
      element: (
        <ErrorBlock
          fullPage
          description={<Link to="/">去首页</Link>}
        />
      )
    }
  ],
  {
    future: {
      v7_relativeSplatPath: true
    }
  }
)

// 3. 向外导出路由对象
export default router
